<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>基本框架</title>
<link href="assets/css/doncare.css" type="text/css" rel="stylesheet" />
<link href="assets/css/doncare.frame.css" type="text/css" rel="stylesheet" />
<link href="assets/font/icon200.css" type="text/css" rel="stylesheet">
<!--[if lt IE 8]>
<link href="assets/font/icon200ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/doncare.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.page.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.frame.js" type="text/javascript" defer></script>
</head>
<body>
<div id="header" class="header">
    <div class="header-left">
        
    </div>
    <div class="header-option">
        <a href="javascript:;" onclick="DC.page.open('advise.html');" ><i class="icon-sign-left"></i>使用建议</a>
        <a href="javascript:;" onclick="DC.page.open('table.html');" ><i class="icon-sign-right"></i>表格</a>
    </div>
</div>
<div id="main" class="main">
    <div class="block">
        <div class="block-main">
            <h3>HTML5 文档声明</h3>
            <hr />
            <p>DoncareUI使用标准HTML5文档声明，格式如下：</p>
            <div class="code-block">
                <pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
 ...
&lt;/html&gt;</pre>
            </div>
            
            <h3>移动端显示设置</h3>
            <hr />
            <p>在<code>&lt;head&gt;</code>之间添加如下内容：</p>
            <div class="code-block">
                <pre>
&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;</pre>
            </div>
            
            <h3>文本和链接</h3>
            <hr />
            <p>为<code>&lt;body&gt;</code>设置样式<code>background-color: transparent;</code></p>
            <p>你要为每个链接设置一个图标，因为DoncareUI的设计语言之一就是：有图标的地方，都可以点击！</p>
        </div>
    </div>
    

    <div class="block transparent">
        <div class="block-main">
    
            <h3>区块和面板</h3>
            <hr />
            <p>block & panel</p>
    
            <h4>一个普通的区块<code>&lt;block&gt;</code>代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="block"&gt;
    &lt;div class="block-header"&gt;
        &lt;span&gt;上标题&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;按钮1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt;按钮2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="block-main"&gt;
        我是区块, blablabla
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <h4>实际显示效果:</h4>
            <div class="block">
                <div class="block-header">
                    <span>上标题</span>
                    <ul>
                        <li><a href="javascript:;"><i class="icon-time"></i>按钮1</a></li>
                        <li><a href="javascript:;"><i class="icon-music"></i>按钮2</a></li>
                    </ul>
                </div>
                <div class="block-main">
                    <p>我是区块，Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
    
            <h4>透明的区块<code>&lt;block&gt;</code>代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="block transparent"&gt;
    &lt;div class="block-header"&gt;
        &lt;span&gt;上标题&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;按钮1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt;按钮2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="block-main"&gt;
        我是区块, blablabla
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <h4>实际显示效果:</h4>
            <div class="block transparent">
                <div class="block-header">
                    <span>上标题</span>
                    <ul>
                        <li><a href="javascript:;"><i class="icon-time"></i>按钮1</a></li>
                        <li><a href="javascript:;"><i class="icon-music"></i>按钮2</a></li>
                    </ul>
                </div>
                <div class="block-main">
                    <p>我是透明区块，Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            
            <h4>一个下标题的区块代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="block"&gt;
    &lt;div class="block-main"&gt;
        我是区块, blablabla
    &lt;/div&gt;
    &lt;div class="block-footer"&gt;
        &lt;span&gt;下标题&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <h4>实际显示效果:</h4>
            <div class="block">
                <div class="block-main">
                    <p>我是区块，Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="block-footer">
                    <span>下标题</span>
                    <ul>
                        <li><a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"><i class="icon-time"></i>&nbsp;</a></li>
                        <li><a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"><i class="icon-music"></i>&nbsp;</a></li>
                    </ul>
                </div>
            </div>
    
            <h4>一个普通的面板<code>&lt;panel&gt;</code>代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="panel"&gt;
    &lt;div class="panel-header"&gt;
        &lt;span&gt;标题&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;按钮1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt;按钮2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="panel-main"&gt;
        &lt;p&gt;我是面板，blablabla&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="panel-footer"&gt;
        &lt;a href="javascript:;" class="btn"&gt;&lt;span&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt;确定按钮&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <h4>实际显示效果:</h4>
            <div class="panel">
                <div class="panel-header">
                    <span>标题</span>
                    <ul>
                        <li><a href="javascript:;"><i class="icon-time"></i>按钮1</a></li>
                        <li><a href="javascript:;"><i class="icon-music"></i>按钮2</a></li>
                    </ul>
                </div>
                <div class="panel-main">
                    <p>我是面板，Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn"><span><i class="icon-ok"></i>确定按钮</span></a>
                </div>
            </div>
    
            <h4>一个带大头图标的面板代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="panel with-icon"&gt;
    &lt;div class="panel-icon"&gt;
        &lt;i class="icon-cog large-icon"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class="panel-header"&gt;
        &lt;span&gt;标题&lt;/span&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"&gt;&lt;i class="icon-music"&gt;&lt;/i&gt;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="panel-main"&gt;
        &lt;p&gt;我是面板，blablabla.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <h4>实际显示效果:</h4>
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-cog"></i>
                </div>
                <div class="panel-header">
                    <span>标题</span>
                    <ul>
                        <li><a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"><i class="icon-time"></i>&nbsp;</a></li>
                        <li><a href="javascript:;" title="无字按钮必须加一个空白字符，否则会出现排版问题"><i class="icon-music"></i>&nbsp;</a></li>
                    </ul>
                </div>
                <div class="panel-main">
                    <p>我是面板，Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    
    <div class="block">
        <div class="block-main">

            <h3>液态12等分网格 <small>fluid 12 grid</small></h3>
            <hr />
            <p>DoncareUI包含1个水平等分的液态网格，可以实现各种灵活的布局。例子：</p>

            <div class="row-fluid">
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
                <div class="span2">
                    <div class="code-block">span2</div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span3">
                    <div class="code-block">span3</div>
                </div>
                <div class="span3">
                    <div class="code-block">span3</div>
                </div>
                <div class="span3">
                    <div class="code-block">span3</div>
                </div>
                <div class="span3">
                    <div class="code-block">span3</div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4">
                    <div class="code-block">span4</div>
                </div>
                <div class="span4">
                    <div class="code-block">span4</div>
                </div>
                <div class="span4">
                    <div class="code-block">span4</div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span5">
                    <div class="code-block">span5</div>
                </div>
                <div class="span7">
                    <div class="code-block">span7</div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span6">
                    <div class="code-block">span6</div>
                </div>
                <div class="span6">
                    <div class="code-block">span6</div>
                </div>
            </div>
    
            <h4>Grid12代码如下:</h4>
            <div class="code-block">
                <pre>
&lt;div class="row-fluid"&gt;
    &lt;div class="span6"&gt;
        &lt;div class="code-block"&gt;span6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="span6"&gt;
        &lt;div class="code-block"&gt;span6&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
    
            <h4>注意事项:</h4>
            <div class="code-block">
                <p>使用<code>div.row-fluid</code>作为容器</p>
                <p>使用<code>div.spanx</code>作为每个水平分割容器，各个x的总和不能超过12</p>
                <p>使用<code>div.offsetx</code>作为每个水平分割空隙，各个x的总和不能超过12</p>
            </div>
        </div>
    </div>
    
</div>
</body>
</html>
